<template>
	<view class="wrap bg-white">
		<view class="cu-bar bg-white solid-bottom">
			<view class="action">
				<text class="cuIcon-titles text-bold ">选择日期</text>
			</view>
		</view>
		<view class="padding bg-white">
			<view class="search cu-bar">
				<u-search v-model="keywords" @custom="search" @search="search" focus></u-search>
				<view class="action" @click="toScan">
					<text class="cuIcon-scan" style="font-size: 56rpx;"></text>
				</view>
			</view>
		</view>
		<view>
			<view class="padding bg-white">
				<view class="flex">
					<view class="flex-treble   radius">
						<u-form-item label="" prop="time" label-width="200" :label-style="{'font-weight':'bold'}">
						       <u-input placeholder="开始日期" v-model="ldate" type="select" :select-open="ldatepickerTime" @click="ldatepickerTime = true"></u-input>
						</u-form-item>
						<u-picker mode="time" v-model="ldatepickerTime" @confirm="timeConfirm"></u-picker>
					</view>
					<view class="flex-sub  padding-lg radius">
						<text class="content text-lg text-bold ">-</text>
					</view>
					<view class="flex-treble  radius">
						<u-form-item label="" prop="time" label-width="200" :label-style="{'font-weight':'bold'}">
							<u-input placeholder="结束日期" v-model="rdate" type="select" :select-open="rdatepickerTime" @click="rdatepickerTime = true"></u-input>
						</u-form-item>
						<u-picker mode="time" v-model="rdatepickerTime" @confirm="timeConfirm2"></u-picker>
					</view>
				</view>
			</view>
			
		</view>
		<view class="cu-bar bg-white solid-bottom">
			<view class="action">
				<text class="content text-lg text-bold ">总计：{{num}} 箱 {{qty}} 罐</text>
			</view>
		</view>
		<view class="cu-bar bg-white solid-bottom">
			<view class="action">
				<text class="cuIcon-titles text-bold ">发货记录</text>
			</view>
		</view>
		<scroll-view class="scroll-list" scroll-y="true" @scrolltolower="loadMore">
			<u-cell-group v-for="(item, index) in list" :key="index" :index="index" >
					<u-cell-item :arrow="false" @click="navTo('fhjlfrom?code='+item.code)">
						<view slot="label" class="u-font-lg">
							<view class="padding-bottom-sm text-bold"><text>发货单号：{{item.code}}</text></view>
							<view class="padding-bottom-sm text-bold"><text>发货时间：{{item.updateDate}}</text></view>
							<view class="padding-bottom-sm text-bold"><text>发货数量：{{item.num}} 箱 {{item.qty}} 罐</text></view>
							<view class="padding-bottom-sm text-bold"><text>发货人：{{item.updateBy}}</text></view>
						</view>
					</u-cell-item>
					<u-line color="blue" />
			</u-cell-group>
			<view class="loadmore" @click="loadMore">
				<u-loadmore :status="loadStatus"></u-loadmore>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				ldate:'',
				ldatepickerTime: false,//控制日期显示rTime: false,//控制日期显示
				rdate:'',
				rdatepickerTime: false,//控制日期显示rTime: false,//控制日期显示
				num:0,
				qty:0,
				list:[],
				loadStatus: 'nomore',
				pageNo: 1,
				pageSize: 10,
				hieght:'',
				keywords:'',
			}
		},
		onLoad() {
			uni.getSystemInfo({
				success:function(res){
					this.hieght = (res.windowHeight - 200) + 'upx';
				}
			})
			
			var date = new Date();
			var year = date.getFullYear();
			var month = date.getMonth() + 1;
			var day = date.getDate();
			month >= 1 && month <= 9 ? (month = "0" + month) : "";
			day >= 0 && day <= 9 ? (day = "0" + day) : "";
			var timer = year + '-' + month + '-' + day ;
			this.ldate = timer;
			this.rdate = timer;
			this.findQtyList();
		},
		methods: {
			search(){
				this.list = [];
				this.ldate = "";
				this.rdate = "";
				this.num = 0;
				this.qty = 0;
				this.pageNo = 1;
				this.findQtyList();
			},
			/** 扫码 */
			toScan() {
				var _this = this;
				uni.scanCode({ 
					onlyFromCamera: true,
					success: function(res) {
						this.keywords = res.result;
						this.findQtyList();
					}.bind(this)
				});
			},
			timeConfirm(e){
				this.ldate = e.year + '-' + e.month + '-' + e.day;
				this.list = [];
				this.num = 0;
				this.qty = 0;
				this.keywords = "";
				this.pageNo = 1;
				this.findQtyList();
		    },
			timeConfirm2(e){
				this.rdate = e.year + '-' + e.month + '-' + e.day;
				this.list = [];
				this.num = 0;
				this.qty = 0;
				this.pageNo = 1;
				this.keywords = "";
				this.findQtyList();
			},
			
			loadMore() {
				if(this.loadStatus != 'nomore'){
					setTimeout(() => {
						this.pageNo = parseInt(this.pageNo) + 1;
						this.findQtyList();
					}, 100);
				}
				
			},
			//调用方法
			findQtyList(){
				if((this.ldate != '' && this.rdate != '') || this.keywords != ''){
					var _this = this;
					var query = {
						keywords:_this.keywords,
						ldate:_this.ldate,
						rdate:_this.rdate,
						pageNo: _this.pageNo,
						pageSize: _this.pageSize
					};
					_this.$u.api.box.findQtyList(query).then(res=>{
						_this.keywords = "";
						if(res.result == 'true'){
							_this.num = res.num;
							_this.qty = res.qty;
							res.list.forEach(item=>{
								_this.list.push(item); 
							})
							_this.loadStatus = "loadmore";
							if(res.list == undefined || res.list.length > 0 && res.list.length < 10){
								_this.loadStatus = "nomore";
							}
						}else{
							this.$u.toast(res.message);
						}
					})
				}
			},
			navTo(url) {
				uni.navigateTo({
					url: url
				});
			}
		}
	}
</script>

<style>
@import '../btdm.css';
.scroll-list {
	height: calc(100vh - var(--window-top) - var(--window-bottom) - 350px);
	width: 100%;
}
</style>
